﻿/******************************************************************************
* File description: StepLine.qml
* Function: 最上面的tab步骤条
* Current Version: 1.0.0
* Author: JNN
* Date: 2025-07-01
*  -----
*  Copyright by 博坤生物 .
 *****************************************************************************/

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.12

import "../components"

Rectangle {

    id: root

    height: 64*dp
    width: parent.width
    color: Qt.rgba(238/255, 238/255, 238/255)

    property var pageName: ["主页", "放靶", "打靶", "转靶", "纯化"]
    property real progressBarHeight: 4*dp

    // 白条与绿条
    Rectangle{
        height: progressBarHeight
        width: parent.width
        y: parent.height - height
        Rectangle{
            width: layout_row.x + 140*dp
            height: parent.height
            color: Qt.rgba(86/255, 189/255, 108/255)
            visible: (gExpIsRunning === 1) && gStateExp.selectedExpType === 0      // 实验运行中且非单步实验
        }
    }

    function pageVisibleState(idx){            // 返回屏蔽模式下模块是否可见
        // 主页
        if(idx === 0){
            return true
        }
        // 放靶/打靶/转靶
        if(idx === 1 || idx === 2 || idx === 3){
            if(gAppModule === 0 || gAppModule === 1){
                return true
            }else{
                return false
            }
        }
        // 纯化
        if(idx === 4){
            if(gAppModule === 0 || gAppModule === 2){
                return true
            }else{
                return false
            }
        }
    }

    function refreshPageState(){

        for(let i = 0; i < 5; i ++){
            if(gExpIsRunning === 0){           // 不在实验状态的时候不要转
                pageState[i] = 0
            }
            else if(gStateExp.moduleStatus[i] === -1){
                pageState[i] = 3    // 错误
            }else if(gStateExp.moduleStatus[i] === 0){
                pageState[i] = 0    // 不执行
            }else if(gStateExp.moduleStatus[i] === 1){
                pageState[i] = 1    // 等待执行
            }else if(gStateExp.moduleStatus[i] === 2){
                pageState[i] = 1    // 运行中
            }else if(gStateExp.moduleStatus[i] === 3){
                pageState[i] = 2    // 已完成
            }
        }
        pageStateChanged()
    }

    Connections{
        target: gStateExp
        onModuleStatusChanged:{
            refreshPageState()
        }
    }Connections{
        target: mainwindow
        onGExpIsRunningChanged: {
            refreshPageState()
        }onGExpIsFailureChanged: {
            refreshPageState()
        }onGExpIsPauseChanged: {
            refreshPageState()
        }
    }

    property var pageState: [0, 0, 0, 0, 0]         // 0灰色  1蓝色  2绿色  3红色
    property var deepColor: ["#1677FF", "#1677FF", "#56BD6C", "#F04545"]
    property var lightColor: ["#CCCCCC", "#D9E9FF", "#B5F3B7", "#FA9898"]
    property var connectState: [0, 0, 0, 0, 0]

    property real buttonSize: 30*dp

    signal tabPage(var idx)

    Row{
        id: layout_row
        anchors.centerIn: parent
        Repeater{
            model: pageName.length
            Rectangle{
                height: root.height
                width: 140*dp
                color: gPageIdx === index ? "white" : "transparent"
                Row{
                    id: item
                    property bool isHovered: true
                    height: buttonSize
                    visible: pageVisibleState(index)
                    anchors.centerIn: parent
                    Rectangle{      // 这里现在是图标
                        color: "transparent"
                        border.color: gPageIdx===index ? "#28F" : "#BBB"
                        radius: height*0.5
                        height: buttonSize; width: height
                        CustomImage{            // 小圈圈的图标
                            id: bt_image
                            height: 20*dp; width: 20*dp
                            visible: {
                                if(index === 4 && gStateExp.isUnion && gExpIsRunning){          // 纯化模块在并发时转圈
                                    return false
                                }
                                return gStateExp.moduleStatus[index] !== 2    // 非[进行中]时，显示图标
                            }
                            source: "qrc:/picture/stepLine/step" + index + (gPageIdx===index?"_b":"_0") + ".png"             // 选中时显示蓝色，否则显示灰色
                            anchors.centerIn: parent
                        }
                        CustomAnimatedImage{  // 转圈
                            visible: {
                                if(index === 4 && gStateExp.isUnion && gExpIsRunning){           // 纯化模块在并发时转圈
                                    return true
                                }
                                return gStateExp.moduleStatus[index] === 2 && (gExpIsRunning === 1)  // [进行中]时，显示转圈
                            }
                            source: gPageIdx===index ? "qrc:/picture/stepLine/running_0.gif" : "qrc:/picture/stepLine/running_0.gif"
                            playing: visible
                            height: 20*dp; width: 20*dp
                            anchors.centerIn: parent
                            opacity: gPageIdx===index ? 1 : 0.6 // 黑的那个转圈有点太黑了……
                        }
                    }Text {
                        id: bt_text
                        text: qsTr(pageName[index])
                        font.pixelSize: config.fontsize_1
                        height: parent.height
                        width: 60*dp
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        color: gPageIdx===index ? "#1677FF" : "#000"
                    }
                }
                // 下面的条
                Rectangle{
                    visible: (gExpIsRunning === 1) && gStateExp.moduleStatus[index] === 3 && gStateExp.selectedExpType === 0 // 实验运行中且已完成且非单步实验
                    color: Qt.rgba(86/255, 189/255, 108/255)
                    height: progressBarHeight
                    width: parent.width
                    y: parent.height - height
                }

                MouseArea{
                    anchors.fill: parent
                    cursorShape: "PointingHandCursor"
                    hoverEnabled: true
                    onEntered: {
                        item.isHovered = true
                    }onExited: {
                        item.isHovered = false
                    }
                    onClicked: {
                        if(gExpIsRunning === 0){       // 未运行时可以跳转
                            root.tabPage(index)
                        }else{
                            if(gStateExp.selectedExpType === 0){
                                root.tabPage(index)
                            }else{
                                toast.show("单步实验进行中，无法跳转页面", 1)
                            }
                        }
                    }
                }
            }



        }
    }





}
